import React, {
    Component
} from "react";
import {
    Modal,
    Tooltip,
    Form,
    Table,
    Row,
    Col,
    Spin,
    Divider,
    DatePicker,
    message,
    Button,
    Tabs,
    Input,
    Upload,
    Icon
} from 'antd';
import locale from "antd/lib/date-picker/locale/zh_CN";
import moment from 'moment';
import {
    stubCfgRecord
} from "../../../fetch/fetchApi";
import classNames from 'classnames';
import LogDetail from './logDetail';

class ModifyLog extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            data: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10'
        };
        this.tableColumns = [{
            title: '操作类型',
            dataIndex: 'operationType',
            key: 'operationType',
            className: 'column-nowrap'
        }, {
            title: '操作方式',
            dataIndex: 'operationFrom',
            key: 'operationFrom',
			align:'center',
        }, {
            title: '操作平台',
            dataIndex: 'platform',
            key: 'platform',
			align:'center',
        }, {
            title: '操作人',
            dataIndex: 'username',
            key: 'username',
        }, {
            title: '操作时间',
            dataIndex: 'createTime',
            key: 'createTime',
			align:'center',
        }, {
            title: '变更参数',
            dataIndex: 'operation',
            key: 'operation',
            align:'center',
            render: (text, record) => (
                <a href="javascript:void(0);" onClick={()=> this.showDetailModal(record)}>查看</a>
            )
        }];
    }

    showDetailModal = (record) => {
        this.setState({
            visible: true,
            detailRecord: record
        })
    }

    stubCfgRecord = (params = {}) => {
        this.setState({
            loading: true
        })
        stubCfgRecord(this.query).then((res) => {
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = parseInt(this.query.page);
            this.setState({
                loading: false,
                data: res.data.data,
                pagination,
            });
            this.props.handle(false);
        });
    }

    componentDidMount() {
        this.query["stubId"] = this.props.id;
        //this.query["stubId"] = "10006434";
        this.stubCfgRecord();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.isNeedFlush) {
            this.query["page"] = 1;
            this.query["stubId"] = nextProps.id;
            this.stubCfgRecord();
        }
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.query.page = pagination.current;
        this.stubCfgRecord();
    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    render() {

        const content = <div className="sc-page-content">
            <div className="page-panel">
                <Table onChange={this.handleTableChange} bordered dataSource={this.state.data} loading={this.state.loading} columns={this.tableColumns} pagination={this.state.pagination}/>
            </div>
            <Modal width='800px' visible={this.state.visible} footer={null} onCancel={this.handleCancel} title={'变更参数'}>
                <LogDetail data={this.state.detailRecord}/>
            </Modal>
        </div>
        return content
    }
}
export default ModifyLog;